<template>
  <v-upload
    :fileList="fileList"
    :width="width"
    :height="height"
    @oversize="oversize"
    @afterRead="afterRead"
    @on-remove="deletePic"
    :multiple="multiple"
    :maxCount="maxCount"
    :accept="accept"
    :maxSize="maxSize"
    :autoUpload="false"
    :customBtn="customBtn"
    :limitRatio="limitRatio"
    :minRatio="minRatio"
    previewImage>
    <view slot="addBtn">
      <slot name="addBtn">
      </slot>
    </view>
  </v-upload>
</template>

<script>
import { uploadImage } from '@/api/common';
export default {
  components: {

  },
  props: {
    width: {
      type: Number,
      default: 200
    },
    height: {
      type: Number,
      default: 200
    },
    maxCount: {
      type: Number,
      default: 10
    },
    maxSize: {
      type: Number,
      default: 10 * 1024 * 1024 // 10 兆
    },
    multiple: {
      type: Boolean,
      default: true
    },
    // all | media | image | file | video (只有微信小程序支持 all、media)
    accept: {
      type: String,
      default: 'image'
    },
    value: {
      type: String,
      default: ''
    },
    customBtn: {
      type: Boolean,
      default: false
    },
    limitRatio: {
      type: Array,
      default: () => []
    },
    minRatio: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      fileList: [],
      list: []
    };
  },
  model: {
    prop: 'value',
    event: 'input'
  },
  watch: {
    value(val) {
      if (val && !this.fileList.length) {
        console.log('value watch');
        this.fileList = val.split(',').map(e => {
          return {
            url: e,
            status: 'success',
            isInsert: true
          };
        });
      }
    }
  },
  created() {
    if (this.value && !this.fileList.length) {
      console.log('value created');
      this.fileList = this.value.split(',').map(e => {
        return {
          url: e,
          status: 'success',
          isInsert: true
        };
      });
    }
  },
  methods: {
    change(lists) {
      const url = lists.filter(e => e.status == 'success').map(e => e.url).join(',');
      console.log('url88', url);
      this.$emit('input', url);
      this.$emit('change', url);
      this.$emit('changeList', lists.filter(e => e.status == 'success'));
    },
    // 删除图片
    deletePic(event, list) {
      this.change(list);
    },
    oversize(e, err) {
      uni.showModal({
        content: `最大${this.maxSize}兆！`,
        showCancel: false
      });
    },
    // 新增图片
    async afterRead(event, onComplate) {
      console.log(event, 'event');
      const lists = [].concat(event);
      for (let i = 0; i < lists.length; i++) {
        const item = lists[i];
        if (item.file && item.status != 'success') {
          const result = await uploadImage({ url: item.file.path, fileType: this.accept });
          console.log('result', result);
          let status = 'progress';
          onComplate({ status }, item.id);
          if (!result.err) {
            status = 'success';
            onComplate({ status }, item.id);
          } else {
            status = 'fail';
            onComplate({ status, error: result.err.errMsg }, item.id);
          }

          item.url = process.env.VUE_APP_UPLOAD_URL + result.url;
          item.status = status;

          this.change(lists);
        }
      }
    }
  }

};
</script>
